const data = [
  { id: 1, name: '用户管理', pid: 0 },
  { id: 2, name: '菜单申请', pid: 1 },
  { id: 3, name: '信息申请', pid: 1 },
  { id: 4, name: '模块记录', pid: 2 },
  { id: 5, name: '系统设置', pid: 0 },
  { id: 6, name: '权限管理', pid: 5 },
  { id: 7, name: '用户角色', pid: 6 },
  { id: 8, name: '菜单设置', pid: 6 },
]
// class MyTree extends Tree {
//   render(): string {
//     return ''
//   }
// }
class Tree {
  constructor(options) {
    this.root = []
    this.str = ''
    this.data = options.data

    this.init(this.data)
    console.log(this.root, 'root')
  }
  getData() {
    return this.root
  }
  init(data) {
    const parents = data.filter((item) => item.pid === 0)
    const children = data.filter((v) => v.pid !== 0)
    this.dataToTree(parents, children)
    this.root = parents
    // return parents
  }
  // 递归
  dataToTree(parents, children) {
    parents.forEach((element) => {
      // element.component = () => import('@/views/' + element.path)
      children.forEach((item, i) => {
        if (element.id === item.pid) {
          // item.component = () => import('@/views/' + item.path)
          let _c = JSON.parse(JSON.stringify(children))
          _c.splice(i, 1)
          this.dataToTree([item], _c)
          if (element.children) {
            // this.str += `<ol><li> ${item.name} </li> </ol>`
            element.children.push(item)
          } else {
            element.children = [item]
          }
        }
      })
    })
  }
  render(data) {
    // 使用vue 做一个递归组件
    // 拿到this.root遍历循环成字符串，一次性抛出
  }
}
let it = new Tree({ root: [], data: data })
// it.render(it.root)
// export {};
// console.log(it.root, 'root')
// const res = it.init(data)
// console.log('res:', res)
/***
 *
 * [
 *	{ "id": 1, "name": "用户管理", "pid": 0 },
 *	{ "id": 1, "name": "用户管理", "pid": 0, children: [] },
 * ]
 *
 * <ul>
 *   <li>
 *     {item.name}
 *      <ul>
 *        <li>{val.name}</li>
 *      </ul>
 *   </li>
 * </ul>
 *
 *
 */
